[DAY3] JavaScript是什麼？JS 引擎又是什麼？

2025 iThome 鐵人賽

DAY 3

Modern Web

17th鐵人賽 js

208 瀏覽

JavaScript（簡稱 JS）是一種高階、直譯式、動態型別、基於原型的語言

我們一一來拆解這些名詞：

高階語言（High-level language）：語法以人類日常的語言較為接近的程式語言，並將比較底層的工作藏起來了，例如記憶體管理。ex：C++、Python
直譯式語言（Interpreted language）：程式碼在執行的時候會一行一行的邊看邊執行成機器碼（電腦看的語言，由一連串的0 與1 構成），不像編譯語言（如：C、JAVA）要先整份經過編譯之後再整個轉成機器碼
- Note：現代 JS 引擎（像 V8）其實會做 JIT（即時編譯），不再是單純的「純直譯」，但 JS 的語言設計仍屬於直譯語言
動態型別（Dynamically typed）：JavaScript 不需要在宣告變數時就指定類型，變數的型別可以隨時變
```
let x = 10;      // 整數
x = "Hello JS";  // 字串（可以直接換型別）
```
基於原型（Prototype-based）：是物件導向設計的一種風格和方式，但這種和C與C++不同，JavaScript 沒有傳統類別（class）為主的繼承系統（雖然 ES6 開始加了 class 語法糖），它是以「原型」為基礎來實作繼承的

這個觀念有點複雜，我有看到好文章在講解（文章裡面也有好文），可以先去看看，明天會再整理出來～

https://blog.techbridge.cc/2017/04/22/javascript-prototype/

當你在瀏覽器裡寫下 console.log('Hello World!')，誰在背後負責理解你寫的程式碼、把它轉成電腦看的機器碼？這就是 JavaScript 引擎（JavaScript Engine） 的工作！

JS 引擎是內建在瀏覽器中的一個程式，它負責解析、執行 JavaScript 程式碼。每個主流瀏覽器都有自己的一套 JS 引擎

例如：

我們以最知名的 V8 引擎（Chrome、Node.js 使用）為例，它的執行流程大致如下：

原始 JS 程式碼 → Parser（語法分析器）

你寫的 JavaScript 程式碼會先被語法分析器讀入

這個階段會檢查語法有沒有錯，並開始將程式碼拆解成有意義的語言結構
產生 AST（Abstract Syntax Tree，抽象語法樹）

程式碼被轉換成一棵語法樹，這棵樹描述每段程式碼的結構和意圖

結構像是：
```
{
  "type": "BinaryExpression",
  "operator": "+",
  "left": { "type": "Literal", "value": 2 },
  "right": { "type": "Literal", "value": 3 }
}
```
Interpreter（直譯器，Ignition）

V8 的第一階段執行器是 Ignition，它負責將 AST 轉譯成一種中間表示的 Bytecode（位元碼）

這種 bytecode 比原始 JS 更接近機器能執行的格式
執行 Bytecode

Bytecode 被送入虛擬機器開始執行

這個階段已經比直接解釋 JS 程式碼快了，但還不夠快
JIT 編譯器（TurboFan）

如果某段程式碼被反覆執行，V8 就會將它交給 JIT 編譯器 TurboFan

TurboFan 會根據執行時的實際情況，對這段程式碼進行最佳化
Machine Code 執行

最後這段程式碼會被轉成真正的機器碼（Machine Code），讓 CPU 可以直接執行，達到最佳效能

Note：Ignition 與 TurboFan 是什麼？
上面提到的 Ignition 和 TurboFan，是 V8 JavaScript 引擎中兩個非常關鍵的元件，負責將 JavaScript 程式碼轉換為更有效率的執行格式。

Ignition（直譯器）
Ignition 是 V8 的直譯器，它的角色是將 JavaScript 原始碼轉換成 Bytecode（位元碼），並立即執行
TurboFan（JIT 編譯器）
TurboFan 是 V8 的 JIT（Just-In-Time）編譯器，專門處理那些被重複執行多次的程式碼。
它會根據實際執行的情況來進行優化編譯，將 Bytecode 轉換成機器碼，以達到高效能。